import React from 'react'

interface IconProps { size?: number }

const strokeCommon = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.8,
  strokeLinecap: 'round' as const,
  strokeLinejoin: 'round' as const,
}

export const IconHome: React.FC<IconProps> = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <path {...strokeCommon} d="M3 10.5l9-7 9 7" />
    <path {...strokeCommon} d="M5.5 9.5V20a1 1 0 0 0 1 1H9a1 1 0 0 0 1-1v-4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1V20a1 1 0 0 0 1 1h2.5a1 1 0 0 0 1-1V9.5" />
  </svg>
)

export const IconDumbbell: React.FC<IconProps> = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <path {...strokeCommon} d="M2.5 9.5v5" />
    <rect x="3.5" y="8" width="2.5" height="8" rx="1" {...strokeCommon as any} />
    <path {...strokeCommon} d="M8 10v4" />
    <path {...strokeCommon} d="M16 10v4" />
    <rect x="18" y="8" width="2.5" height="8" rx="1" {...strokeCommon as any} />
    <path {...strokeCommon} d="M21.5 9.5v5" />
    <path {...strokeCommon} d="M8 12h8" />
  </svg>
)

export const IconTarget: React.FC<IconProps> = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="8" {...strokeCommon} />
    <circle cx="12" cy="12" r="4" {...strokeCommon} />
    <path {...strokeCommon} d="M12 2v3M22 12h-3M12 22v-3M2 12h3" />
  </svg>
)

export const IconUser: React.FC<IconProps> = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <circle cx="12" cy="8" r="4" {...strokeCommon} />
    <path {...strokeCommon} d="M5 20a7 7 0 0 1 14 0" />
  </svg>
)

export const IconRun: React.FC<IconProps> = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <circle cx="16" cy="5" r="2" {...strokeCommon} />
    <path {...strokeCommon} d="M7 22l3-5 2-3 3 2 2 4" />
    <path {...strokeCommon} d="M5 12l5-2 3 2" />
  </svg>
)

